<template>
  <Dialog v-model="visible" title="面试跟进" width="600px">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="loading"
    >
      <el-form-item label="初试官" prop="preliminaryUser">
        <CascaderUser v-model="formData.preliminaryUser" placeholder="请选择初试官" class="w-full" />
      </el-form-item>

      <el-form-item label="复试官" prop="reexamineUser">
        <CascaderUser v-model="formData.reexamineUser" placeholder="请选择复试官" class="w-full" />
      </el-form-item>

      <el-form-item label="是否录用求职者" prop="whetherToHire">
        <el-radio-group v-model="formData.whetherToHire" size="small">
          <el-radio label="是" border/>
          <el-radio label="否" border/>
          <el-radio label="待定" border/>
        </el-radio-group>
      </el-form-item>


      <el-form-item label="跟进结果" prop="trailResult">
        <el-input
          v-model="formData.trailResult"
          placeholder="请输入跟进结果"
        />
      </el-form-item>

      <div v-if="formData.whetherToHire === '是'">
        <el-form-item label="约定入职日期" prop="agreeDate">
          <el-date-picker
            v-model="formData.agreeDate"
            type="date"
            value-format="x"
            placeholder="请选择约定入职日期"
            class="w-full"
          />
        </el-form-item>
      </div>
    </el-form>

    <template #footer>
      <el-button @click="visible = false" :disabled="loading">取 消</el-button>
      <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import CascaderUser from '@/components/CascaderUser/CascaderUser.vue'
import { RecruitInterviewApi, type RecruitInterview } from '@/api/business/hr/recruit/interview'
import { useMessage } from '@/hooks/web/useMessage'
import { useI18n } from '@/hooks/web/useI18n'

const visible = ref(false)
const loading = ref(false)
const formRef = ref<FormInstance>()
const message = useMessage()
const { t } = useI18n()

const formData = reactive({
  id: undefined as number | undefined,
  preliminaryUser: undefined as string | undefined,
  reexamineUser: undefined as string | undefined,
  whetherToHire: '待定',
  interviewResult: '',
  trailResult: '',
  agreeDate: ''
})

const formRules: FormRules = {
  preliminaryUser: [{ required: true, message: '请选择初试官', trigger: 'change' }],
  reexamineUser: [{ required: true, message: '请选择复试官', trigger: 'change' }],
  whetherToHire: [{ required: true, message: '请选择是否录用求职者', trigger: 'change' }],
  trailResult: [{ required: true, message: '请输入跟进结果', trigger: 'blur' }]
}

const resetForm = () => {
  formData.id = undefined
  formData.preliminaryUser = undefined
  formData.reexamineUser = undefined
  formData.whetherToHire = '待定'
  formData.trailResult = ''
  formData.agreeDate = ''
  formRef.value?.clearValidate()
}

const open = async (row: RecruitInterview) => {
  visible.value = true
  resetForm()

  // 初始化表单数据
  formData.id = row.id
  formData.preliminaryUser = row.preliminaryUser || undefined
  formData.reexamineUser = row.reexamineUser || undefined
  formData.whetherToHire = row.whetherToHire || '待定'
  formData.interviewResult = row.interviewResult || ''
  formData.trailResult = row.trailResult || ''
  formData.agreeDate = row.agreeDate || ''
}

const emit = defineEmits(['success'])

const submitForm = async () => {
  if (!formRef.value) return
  await formRef.value.validate()
  loading.value = true

  try {
    const payload: RecruitInterview = {
      id: formData.id,
      preliminaryUser: formData.preliminaryUser,
      reexamineUser: formData.reexamineUser,
      whetherToHire: formData.whetherToHire,
      trailResult: formData.trailResult,
      agreeDate: formData.agreeDate || undefined
    }

    await RecruitInterviewApi.recruitInterviewResult(payload)
    message.success(t('common.updateSuccess'))
    emit('success')
    visible.value = false
  } finally {
    loading.value = false
  }
}

// 暴露方法给父组件
defineExpose({ open })
</script>
